<template>
  <div class="movie">
   <Nav :title="title" :path="path"></Nav>
    <div class="content">
        <van-search v-model="value" placeholder="请输入搜索关键词" @focus="jump"/>
        <div v-for="(item, index) of lists" :key="index">
            <Top :item="item" :keyword="index"></Top>
            <Content :item="item.res" :m="index"></Content>
        </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/Top";
import Content from "../../components/Content";
import transfromStar from "../../utils/index"
import title from '../../static/index'
export default {
    data() {
        return {
        lists: {},
        value:"",
        path:'/tabbar/article',
        title:'光与影'
        };
    },
    components: {
        Top,
        Content,
    },
    async mounted() {
        var lists = {}
        var http =['inTheaters','top250','comingSoon']
        for (let item of http) {
        var res = await this.$http.get(`/movie?m=${item}`)
        var arr = res.data.result
        arr.forEach(item=>{
            item.star=transfromStar(item.rating)
        })
        lists[item] = {
            title: title[item],
            res: arr.slice(0, 3),
        };
        }
        this.lists = lists;
    },
    methods: {
        jump(){
            this.$router.push('/tabbar/search')
        }
    },
};
</script>

<style>
.movie .content{
    margin-top: 90px;
}
.van-search{
  height: 100px;
}
.van-cell{
  line-height: 60px;
}
input{
  font-size: 30px;
}
.van-field__left-icon .van-icon {
  font-size:40px;
}
</style>